<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="DoAction(event);">开始</button>
		<table border="1" cellspacing="0" cellpadding="10" bgcolor="aqua">		
			<tr>
				<td id="jp1"><img src="img/1.jpg" ></td>
				<td id="jp2"><img src="img/2.jpg" ></td>
				<td id="jp3"><img src="img/3.jpg" ></td>
			</tr>
			<tr>
				<td id="jp4"><img src="img/4.jpg" ></td>
				<td id="jp5"><img src="img/5.jpg" ></td>
				<td id="jp6"><img src="img/6.jpg" ></td>
			</tr>
			<tr>
				<td id="jp7"><img src="img/7.jpg" ></td>
				<td id="jp8"><img src="img/8.jpg" ></td>
				<td id="jp9"><img src="img/9.jpg" ></td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		function DoAction(event){
			event.target.innerText = '抽奖中...';
			var num =0;
			var setintervals = setInterval(function(){
					event.target.innerText='重新抽奖';
					var tds =document.getElementsByTagName('td');					
					for(var i=0;i<tds.length;i++){
						tds[i].style.backgroundColor ='aqua';
					}
					var randoms =getrandoms();
					console.log("公布抽奖结果："+randoms);
					document.getElementById('jp'+randoms).style.backgroundColor = 'red';
					num++;
					if(num>10){
						clearInterval(setintervals);
						event.target.innerText ='重新抽奖';
					}
			},50)	
		}
		function getrandoms(){
			while(true){
				var randoms= Math.floor(Math.random()*10);
				if(randoms != 0){
					return randoms;
				}
			}
		}
	</script>
</html>
